JSX (JavaScript XML) 是 React 特有的語法擴充，讓使用者能夠在 JavaScript 裡直接寫出類似 HTML 的標籤；這種語法可以讓 UI 更直觀，更接近我們平常理解的網頁結構。

JSX是什麼

• React的語法擴充：JSX是一種語法糖 ( Syntactic Sugar ) ，讓使用者能在 JavaScript 裡直接寫出類似 HTML 的標籤
• 需要被轉譯：瀏覽器無法直接理解JSX，需要由 Babel 轉譯成 JavaScript 物件，也就是呼叫React.createElement() 這個函式，才能在瀏覽器執行

Babeljs

Babel : JavaScript 編譯器 (compiler)
https://babeljs.io/repl

• 把新版本 JavaScript（ES6+）轉成舊版語法（ES5），讓舊的瀏覽器或環境能執行
• 把 JSX / TypeScript 轉換成 JavaScript

為什麼需要JSX

UI更直覺：使用 JSX，比原本JavaScript的函式（React.createElement()）更直觀，讓程式碼更容易閱讀與維護

語法介紹

Fragment Component （隱形包裝元素）

允許一次回傳多個元素，而不會在 DOM 中多產生額外的節點

• <> </> → 簡短寫法，無法加 key 或屬性
• <Fragment> </Fragment> → 可加屬性（例如 key）

例如：

return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

或是

return (
  <Fragment>
    <h1>Hello</h1>
    <p>World</p>
  </Fragment>
);

為什麼要用 Fragment？

在 JSX 中，React 元件只能 return 一個根元素；如果只是想把多個元素包在一起，又不想在 DOM 多出 <div> 等等的標籤，使用 Fragment 可以避免不必要的 DOM 節點

React 命名規則

元件名稱：PascalCasing 命名規則

• 每個單字的第一個字母都大寫
• 單字之間不加底線或空格
• 例如：MyComponent、UserProfile

JSX屬性與事件：camelCase 駝峰式命名規則

• 第一個字母小寫，後面每個單字的的第一個字母都大寫
• 例如：
  • HTML 屬性：className、tabIndex
  • React 事件：onClick、onChange